<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://www.springframework.org/tags" prefix="s" %>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%@ page session="false"%>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="<c:url value="resources/bootstrap/css/bootstrap.min.css"/>"
	rel="stylesheet" media="screen">
<script src="http://code.jquery.com/jquery.js"></script>
<script src="<c:url value="resources/bootstrap/js/bootstrap.min.js" />"></script>
<style type="text/css">
      body {
        padding-top: 20px;
        padding-bottom: 40px;
      }

      /* Custom container */
      .container-narrow {
        margin: 0 auto;
        max-width: 700px;
      }
      .container-narrow > hr {
        margin: 30px 0;
      }

      /* Main marketing message and sign up button */
      .jumbotron {
        margin: 80px 0;
        text-align: center;
      }
      .jumbotron h1 {
        font-size: 72px;
        line-height: 1;
      }
      .jumbotron .btn {
        font-size: 21px;
        padding: 14px 24px;
      }

      /* Supporting marketing content */
      .marketing {
        margin: 60px 0;
      }
      .marketing p + h4 {
        margin-top: 28px;
      }
    </style>
<script src="<c:url value="resources/bootstrap/js/bootstrap-responsive.min.js" />"></script>
<title>Home</title>
</head>
<body>
	<div class="container-narrow">
		<div class="masthead">
			<ul class="nav nav-pills pull-right">
				<li class="active"><a href="#">Home</a></li>
				<li><a href="#">About</a></li>
				<li><a href="#">Contact</a></li>
			</ul>
			<h3 class="muted">Weight Loss Calculator</h3>
		</div>
		<div class="jumbotron"></div>
		<form:form action="results" method="post" modelAttribute="formBean" class="form-horizontal">
			<div class="control-group">
				<label class="control-label" for="currentWeight">Current Weight:</label>
				<div class="controls">
					<form:input type="text" path="currentWeight" id="currentWeight" placeholder="Current Weight"/>pds
				</div>
			</div>
			<div class="control-group">
				<label class="control-label" for="goalWeight">Goal Weight:</label>
				<div class="controls">
					<form:input type="text" path="goalWeight" id="goalWeight" placeholder="Goal Weight"/>pds
				</div>
			</div>
			<div class="control-group">
				<label class="control-label" for="height">Height:</label>
				<div class="controls">
					<form:input type="text" path="height.feet" class="input-small" id="height" placeholder="feet"/>ft
					&nbsp;
					<form:input type="text" path="height.inches" class="input-small" id="height" placeholder="inches"/>inches
				</div>
			</div>
			<div class="control-group">
				<label class="control-label" for="age">Age:</label>
				<div class="controls">
					<form:input type="text" path="age" id="age" />
				</div>
			</div>
			<div class="control-group">
				<label class="control-label" for="gender">Gender:</label>
				<div class="controls">
					<form:select path = "gender">
						<form:option value=""></form:option>
						<form:option value="male">Male</form:option>
						<form:option value="female">Female</form:option>
					</form:select>
				</div>
			</div>
			<div class="control-group">
				<label class="control-label" for="lifeStyle">Life Style:</label>
				<div class="controls">
					<form:select path="lifestyle">
						<form:option value=""></form:option>
						<form:option value="sedentary">Sedentary</form:option>
						<form:option value="lightlyActive">Lightly Active</form:option>
						<form:option value="moderatelyActive">Moderately Active</form:option>
						<form:option value="active">Active</form:option>
						<form:option value="veryActive">Very Active</form:option>
					</form:select>
				</div>
			</div>
			<div class="form-actions">
				<input class="btn btn-primary" name="result" type="submit"	value="Get Results!" /> 
				<input class="btn btn-danger"  name="reset" type="submit" value="Reset" />
			</div>
		</form:form>
	</div>
	<div class="container-narrow" id="results">
		<c:if test="${fn:length(formBean.results) gt 0 }">
			<table class="table table-striped">
				<tr>
					<th>Date</th>
					<th>Day</th>
					<th>Estimated Weight Loss</th>
					<th>Estimated Calories</th>
				</tr>
				<c:forEach items="${formBean.results}" var="result">
					<tr>
						<td><fmt:formatDate pattern="yyyy-MM-dd" value="${result.schedule.scheduleDate }"/></td>
						<td>${result.schedule.day}</td>
						<td>${result.estimatedLoss}</td>
						<td><fmt:formatNumber type="currency" value="${result.calories}"/></td>
					</tr>	
				</c:forEach>
			</table>
		</c:if>
	</div>
</body>
</html>
